<template>
	<div>
		<el-dialog
			:title="titles"
			:visible.sync="visible"
			width="1200px"
			@closed="onCancel"
			destroy-on-close>
			<div v-loading="loading">
				<div class="checkList" v-if="typeList && typeList.length > 1">
					<div
						class="item"
						v-for="(item, index) in typeList"
						:class="[activeType == item.type ? 'active' : '']"
						@click="checkType(item, index)">
						{{ item.label }}
					</div>
				</div>
				<SearchForm
					@reset="reset"
					@search="search"
					ref="search"
					gap="10px 0">
					<FormItem
						v-for="item in currentSearchForm"
						v-model="queryParams"
						:config="item"></FormItem>
				</SearchForm>
				<div class="tablePage" :key="activeTableType">
					<table-page
						ref="table"
						:dataList="datalist"
						:total="total"
						:page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize"
						:border="true"
						@setSizeCurrent="pageConfigChange"
						:isSelect="selection"
						@selectionChange="selectionChange"
						:config="{
							style: {
								minHeight: '410px',
							},
						}">
						<!-- 操作插槽 -->
						<template slot="tableColAc">
							<el-table-column
								label="序号"
								align="center"
								type="index"
								width="80">
								<template slot-scope="scope">
									<span v-if="index(scope.$index) <= 999">
										{{ index(scope.$index) }}
									</span>
									<span v-else>
										<el-tooltip
											class="item"
											effect="dark"
											:content="index(scope.$index)"
											placement="top">
											<span>...</span>
										</el-tooltip>
									</span>
								</template>
							</el-table-column>
							<TableColumn
								v-for="item in currentTableColumn"
								:config="item"></TableColumn>

							<el-table-column
								align="center"
								label="操作"
								width="150">
								<template slot-scope="scope">
									<div>
										<el-button
											v-if="type !== 'Tips'"
											type="text"
											@click="onSelect(scope.row)">
											选择
										</el-button>
									</div>
								</template>
							</el-table-column>
						</template>
					</table-page>
				</div>
			</div>
			<div class="handleBox" slot="footer" v-if="selection">
				<el-button type="" size="mini" @click="handle_no">
					{{ toastFailBtn }}
				</el-button>
				<el-button type="primary" size="mini" @click="handle_sure">
					{{ toastSureBtn }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import * as apis from '@/api/A/template/api.js';
	import * as app from '@/api/app.js';
	import FormItem from '@/components/A/A-form/formItem/index.vue';
	import TableColumn from '@/components/A/A-form/tableColumn/index.vue';

	export default {
		inheritAttrs: false,
		components: { FormItem, TableColumn },
		data() {
			return {
				title: '',
				type: '',
				typeList: [],
				params: {},
				visible: false,
				loading: true,
				total: 0,
				datalist: [],
				activeType: '',
				activeInterfaceType: '',
				activeSearchType: '',
				activeTableType: '',
				tableItem: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				selectArr: [],
				selection: false,
				toastSureBtn: '',
				toastFailBtn: '',
				dictList: {},
			};
		},
		computed: {
			titles() {
				let word = this.typeList?.reduce((prev, next) => {
					return `${prev}${prev ? '/' : ''}${next.label}`;
				}, '');
				return this.title || `请选择${word}`;
			},
			currentInterfaceApi() {
				if (this.activeInterfaceType) {
					return this.interface[this.activeInterfaceType];
				} else {
					return () => Promise.resolve();
				}
			},
			currentSearchForm() {
				if (this.activeSearchType) {
					return this.searchForm[this.activeSearchType];
				} else {
					return [];
				}
			},
			currentTableColumn() {
				if (this.activeTableType) {
					return this.tableColumn[this.activeTableType];
				} else {
					return [];
				}
			},
			// 菜单配置
			checkTypeList() {
				return [
					{
						label: '用户',
						type: 'user',
					},
					{
						label: '用户',
						type: 'userNo',
						matchSearchType: 'user',
						matchTableType: 'user',
					},
				];
			},
			//接口
			interface() {
				return {
					user: apis?.UserList,
					userNo: apis.UserNoList,
				};
			},
			// 搜索配置
			searchForm() {
				return {
					user: [
						{
							label: '名称:',
							prop: 'customerName',
							type: 'input',
							placeholder: '请输入名称',
						},
						{
							label: '客户等级:',
							prop: 'customerLevelCode',
							type: 'select',
							dictLabel: 'dictLabel',
							dicttValue: 'dictValue',
							dictList: this.dictList?.customer_level ?? [],
						},
					],
				};
			},
			// 表格列配置
			tableColumn() {
				return {
					user: [
						{
							label: '名称',
							prop: 'customerName',
						},
						{
							label: '联系方式',
							prop: 'customerPhone',
						},
						{
							label: '客户标签',
							prop: 'customerLabel',
						},
						{
							label: '客户等级',
							prop: 'customerLevel',
							format: ({ row }) => {
								let item = this.dictList?.customer_level?.find(
									e => e.dictValue == row.customerLevelCode,
								);
								if (item) {
									return item.dictLabel;
								}
								return '-';
							},
						},
					],
				};
			},
		},
		created() {
			this.init();
		},
		mounted() {},

		methods: {
			init() {
				this.inteCheckOptions();
				this.initTypeList();
				this.beforGetlist();
				this.getList();
			},
			/**
			 * @param activeType String 当前的主类型
			 * @param activeInterfaceType String 当前激活的接口类型
			 * @param activeSearchType String 当前激活的搜索类型
			 * @param activeTableType String 当前激活的表格类型
			 */
			async beforGetlist() {
				if (this.activeTableType === 'user') {
					this._getDicts('customer_level').then(list => {
						this.$set(this.dictList, 'customer_level', list);
					});
				}
			},
			// 初始化配置列表
			inteCheckOptions() {
				this.checkTypeList.forEach((item, index) => {
					item.matchInterfaceType ??= item.type;
					item.matchSearchType ??= item.type;
					item.matchTableType ??= item.type;
				});
			},
			initTypeList() {
				let menus = [],
					types = [];
				if (typeof this.type == 'string') {
					types = this.type.split(',');
				}
				types?.map(item => {
					if (item !== '') {
						let e = this.checkTypeList?.find(
							c =>
								item?.toLocaleLowerCase() ==
								c?.type?.toLocaleLowerCase(),
						);
						if (e) {
							menus.push(e);
						} else {
							console.error(`未配置${item}列表`);
						}
					}
				});
				this.typeList = menus;
				this.activeType = this.typeList?.[0]?.type;
				this.activeInterfaceType =
					this.typeList?.[0]?.matchInterfaceType;
				this.activeSearchType = this.typeList?.[0]?.matchSearchType;
				this.activeTableType = this.typeList?.[0]?.matchTableType;
			},

			checkType(row, index) {
				if (this.activeType !== row.type) {
					this.activeType = row.type;
					this.activeSearchType = row.activeSearchType;
					this.activeTableType = row.activeTableType;
					// 初始化表格选择
					this.initSelectState();
					// 获取数据
					this.getList();
				}
			},

			getList() {
				this.loading = true;
				let params = this._.cloneDeep({
					...this.queryParams,
					...this.params,
				});
				this.currentInterfaceApi(params)
					.then(res => {
						if (res?.code == 200) {
							this.datalist = res?.rows ?? res?.data ?? res?.list;
							this.total = res.total;
						}
					})
					.finally(() => {
						this.loading = false;
					});
			},
			pageConfigChange() {
				this.getList();
			},
			index(index) {
				let num =
					(this.queryParams.pageNum - 1) * this.queryParams.pageSize +
					index +
					1;
				return num?.toString();
			},

			selectionChange(val) {
				this.selectArr = val;
			},
			initSelectState() {
				this.selectArr = [];
				this.$refs.table?.table_clearSelection();
			},
			initQueryParams() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
			},
			reset() {
				this.initQueryParams();
				this.search();
			},
			search() {
				this.getList();
			},
			handle_sure() {
				if (this.selectArr?.length == 0) {
					this.Cancel();
					return;
				}
				this.Select(this.selectArr, this.activeType);
			},
			handle_no() {
				this.Cancel();
			},
			onCancel() {
				this.Cancel();
			},
			onSelect(res) {
				this.Select(res, this.activeType);
			},

			Select() {},
			Cancel() {},
		},
	};
</script>
<style lang="scss" scoped>
	>>> .el-drawer__body {
		min-height: 0;
	}

	.tablePage {
		// padding: 15px;
		padding-top: 15px;
	}
	.checkList {
		display: flex;
		gap: 0 15px;
		.item {
			padding: 7px 12px;
			border: 1px solid #8c8c8c;
			border-radius: 5px;
			cursor: pointer;
			font-size: 14px;
		}
		.active {
			color: #fff;
			background: #1890ff;
			border-color: #1890ff;
		}
	}
	.handleBox {
		display: flex;
		justify-content: flex-end;
	}
	::v-deep .el-dialog {
		display: flex;
		flex-direction: column;
		margin: 0 !important;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-height: calc(100% - 30px);
		max-width: calc(100% - 30px);
	}
	::v-deep .el-dialog .el-dialog__body {
		flex: 1;
		overflow: auto;
	}
</style>
